<template>
	<view class="listright">
		<view class="author-img" v-if="right">
			<image class="img" :src="ip+'/img/'+right.avatar" @click.stop="goToAuthor"></image>
			<view v-if="right.userId != master">
				<view class="follow-box" v-if="right.isfollow==false">
					<view class="author-icon iconfont icon-jia" @click="hide" :class="follow_class"></view>
					<view class="author-icon-followed iconfont icon-dui" :class="followed_class"></view>
				</view>
				<view class="follow-box" v-if="right.isfollow==true">
					<view style="left: 0;" class="author-icon-followed iconfont icon-dui" :class="followed_class">
					</view>
				</view>
			</view>
		</view>
		<view class="follow" @click="changecolor">
			<view class="iconfont icon-aixin" :class="right.islove?'heart':''" style="font-size: 33px;"></view>
			<view class="text">{{right.loveNumber | filter}}</view>
		</view>
		<view class="comments iconfont icon--pinglun" @click.stop="commentShow">
			<view class="text">{{right.commentNumber | filter}}</view>
		</view>
		<view class="forwarding iconfont icon-zhuanfa00" @click="share">
			<view class="text">{{right.shareNumber | filter}}</view>
		</view>
		<view class="music">
			<image class="img" :style="'animation-play-state:'+dataQuery" src="../static/img/2-1.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	export default {
		name: "ListRight",
		data() {
			return {
				right: '',
				share_flat: false,
				firstPlayFlag: false,
				ip: t.o,
				master: '',
				heart: '',
				follow_class: '',
				followed_class: '',
				dataQuery: 'running', //控制动画
			};
		},
		props: {
			rightitem: {
				default: null,
				type: Object,
			}
		},
		watch: {
			rightitem: {
				handler(val) {
					this.right = val;
				},
				immediate: true,
				deep: true,
			}
		},
		filters: {
			filter(value) {
				if (value > 9999) {
					if (value % 10000 >= 1000) {
						return (value / 10000).toFixed(1) + 'w';
					}
					return (value / 10000).toFixed(0) + 'w';
				} else {
					return value;
				}
			}
		},
		created() {
			this.master = uni.getStorageSync('user')[0].userId;
		},
		methods: {
			//底部弹出分享框
			share() {
				this.$emit('shareShow');
			},
			//点击加号关注
			hide() {
				this.follow_class = 'dofollow';
				this.followed_class = 'dofollowed';
				this.doFollow();
			},
			//发送关注事件
			doFollow() {
				this.$emit('followChange', this.right.userId);
			},
			//取消关注事件
			unFollow() {
				this.$emit('unFollowChange', this.right.userId);
			},
			// 点击爱心改变颜色
			changecolor() {
				// this.heart = this.heart == '' ? 'heart' : '';
				// this.heart == 'heart' ? this.doLove() : '';
				this.doLove();
			},
			// 双击屏幕爱心改变颜色
			dbcchangecolor() {
				// this.heart = 'heart';
				// this.heart == 'heart' ? this.doLove() : '';
				this.doLove();
			},
			//通知父组件点赞或取消
			doLove() {
				this.$emit('doLove', this.right.id, this.right.islove);
			},
			animationPlay() {
				this.dataQuery = this.dataQuery == 'running' ? 'paused' : 'running';
			},
			goToAuthor() {
				const vm = this;
				uni.navigateTo({
					url: "/pagesA/user/user?userId=" + this.right.userId + "&isfollow=" + this.right.isfollow,
					events: {
						acceptDataFromOpenedPage: function(data) {
							if (data.data == true) {
								vm.doFollow();
							} else {
								vm.unFollow();
							}
						},
					}
				})
			},
			//展示评论
			commentShow() {
				this.$emit('comment');
			}
		},
	}
</script>

<style lang="scss">
	.listright {
		color: #FFFFFF;
		text-align: center;
		position: relative;

		.author-img {
			width: 50px;
			height: 50px;
			border: 2px solid #FFFFFF;
			border-radius: 100%;
			position: relative;
			transition: all 1s;

			.follow-box {
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
				width: 18px;
				height: 18px;
				overflow: hidden;

				.author-icon,
				.author-icon-followed {
					width: 18px;
					height: 18px;
					line-height: 18px;
					background-color: red;
					border-radius: 100%;
					font-size: 10px;
				}

				.author-icon {
					position: absolute;
					left: 0;
					top: 0;

					&.dofollow {
						animation: dofollow .4s linear;
						left: 18px;
					}
				}

				.author-icon-followed {
					position: absolute;
					color: #4CD964;
					background-color: #FFFFFF;
					font-size: 19px;
					top: 0;
					left: -100%;

					&.dofollowed {
						animation: dofollowed .4s linear;
						left: 0;
					}
				}
			}
		}


		.music {
			width: 50px;
			height: 50px;

			.img {
				animation: rotate 2s linear .2s infinite;
			}
		}
		
	}

	.follow,
	.comments,
	.forwarding,
	.music {
		margin-top: 23px;
		font-size: 33px;
	}
	
	.follow {
		.icon-aixin {
			&.heart {
				animation: heart .4s linear;
				color: red;
			}
		}
	}
	

	.img {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.text {
		line-height: 25px;
		text-align: center;
		font-size: 13px;
		color: #FFFFFF;
	}

	@keyframes heart {
		50% {
			transform: scale(0);
			color: red;
		}
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dofollow {
		0% {
			left: 0;
			transform: rotate(0deg);
		}

		100% {
			left: 18px;
			transform: rotate(180deg);
		}
	}

	@keyframes dofollowed {
		0% {
			left: -100%;
			transform: rotate(180deg);
		}

		100% {
			left: 0;
			transform: rotate(360deg);
		}
	}
	
</style>
